<template>
  <div>
    <div>two</div>
    <div id="mountNode" class="canvasStyle"></div>
  </div>
</template>
<script>
import G6 from '@antv/g6'
export default {
  data () {
    return {

    }
  },
  mounted () {
    this.createGraph()
  },
  methods: {
    createGraph () {
      const initData = {
        // 点集
        nodes: [
          {
            id: 'node1',
            x: 100,
            y: 200,
            label: '起始点',
          },
          {
            id: 'node2',
            x: 300,
            y: 200,
            label: '目标点',
          },
        ],
        // 边集
        edges: [
          {
            source: 'node1',
            target: 'node2',
            label: '我是连线',
          },
        ],
      };
      const graph = new G6.Graph({
        container: 'mountNode',
        width: 800,
        height: 500
      });
      graph.data(initData);
      graph.render();
    }
  }
}
</script>